<template>
  <ActionPanel>
    <ElDescriptions :column="column" border>
      <ElDescriptionsItem label="名称">
        <el-input v-model="name" />
      </ElDescriptionsItem>
      <!--<ElDescriptionsItem label="类型">
        {{ relationTypes[data.type] }}
        <ElSelect v-model="data.type">
          <ElOption v-for="(label, key) in relationTypes" :label="label" :value="key" :key="key" />
        </ElSelect>
      </ElDescriptionsItem> -->
      <ElDescriptionsItem label="标签">
        <el-input v-model="data.label" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="注释" :span="column">
        <el-input v-model="data.comment" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="当前列">
        <template v-if="data.selfColumn">{{ columns[data.selfColumn].label }}</template>
        <ElSelect v-else v-model="data.selfColumn">
          <ElOption v-for="(column, columnName) in selfColumnOptions" :label="column.label" :value="columnName" :key="columnName" />
        </ElSelect>
      </ElDescriptionsItem>
      <ElDescriptionsItem label="目标">
        <TargetEditor v-model:seed-name="data.seedName" v-model:column="data.targetColumn" :type="type" />
      </ElDescriptionsItem>
      <ElDescriptionsItem v-if="'belongsTo' !== type" label="级联模式" :span="column">
        <ElSelect v-model="data.cascade">
          <ElOption v-for="(value, key) in cascadeOptions" :label="value" :value="key" :key="key" />
        </ElSelect>
      </ElDescriptionsItem>
      <ElDescriptionsItem v-if="['hasMany', 'habtm'].includes(type)" label="数据条数" :span="column">
        <ElInputNumber v-model="data.limit" />
      </ElDescriptionsItem>
      <ElDescriptionsItem v-if="'habtm' === type" label="关联" :span="column">
        <ThroughEditor v-model:seed-name="data.throughSeedName" v-model:self-column="data.throughSelfColumn" v-model:target-column="data.throughTargetColumn" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="扩展" :span="column">
        <ExtraEditor v-model="data.extra" :type="type" :selfSeedName="seedName" :targetSeedName="data.seedName" :throughSeedName="data.throughSeedName" />
      </ElDescriptionsItem>
    </ElDescriptions>
    <template #footer>
      <ElButton type="primary" @click="doSave">保存</ElButton>
      <ElButton @click="close">关闭</ElButton>
    </template>
  </ActionPanel>
</template>
<script lang="ts" setup>
  import { ElInput, ElSelect, ElOption, ElButton, ElInputNumber, ElDescriptions, ElDescriptionsItem } from 'element-plus'
  import { getSeed } from '@/views/seed-dev'
  import { computed, inject, ref } from 'vue';
  import feedback from '@/utils/feedback';
  import { ActionPanel } from '@/components/ActionPanel';
  import { closePopupKey } from '@/components/Popup';
  import { cascadeOptions, ExtraEditor, Relaction, save } from '..';
  import ThroughEditor from './ThroughEditor.vue';
  import TargetEditor from './TargetEditor.vue';
  import { RelationType } from '@/views/types';
  import { getRefColumns } from '../../utils/SeedUtil';

  const props = defineProps<{seedName: string, type: RelationType}>()
  const seed = getSeed(props.seedName)
  const columns = seed.columns
  const column = 2

  const selfColumnOptions = computed(() => getRefColumns(getSeed(props.seedName)))

  const close = inject<() => void>(closePopupKey, void 0)
  function validate() {
    if(!name.value) {
      feedback.alertError('名称不能为空')
      return false
    }

    const hasOne = seed.hasOne || {}
    const belongsTo = seed.belongsTo || {}
    const hasMany = seed.hasMany || {}
    const habtm = seed.habtm || {}
    if(Object.keys(columns).includes(name.value)) {
      feedback.alertError(`名称【${name.value}】不能与列名重复`)
      return false
    }
    if(Object.keys(hasOne).includes(name.value)) {
      feedback.alertError(`名称【${name.value}】不能与一对一关系名重复`)
      return false
    }
    if(Object.keys(belongsTo).includes(name.value)) {
      feedback.alertError(`名称【${name.value}】不能与多对一关系名重复`)
      return false
    }
    if(Object.keys(hasMany).includes(name.value)) {
      feedback.alertError(`名称【${name.value}】不能与一对多关系名重复`)
      return false
    }
    if(Object.keys(habtm).includes(name.value)) {
      feedback.alertError(`名称【${name.value}】不能与多对多关系名重复`)
      return false
    }

    return true
  }

  const name = ref<string>()
  const data = ref<Relaction>(getInitData())
  
  function getInitData() {
    const ret: Relaction = {}
    const type = props.type
    ret.type = type
    const refColumnNames = Object.keys(selfColumnOptions.value)
    if(type === 'belongsTo') {
      if(refColumnNames.length === 1) ret.selfColumn = refColumnNames[0]
    } else {
      ret.selfColumn = 'id'
    }

    return ret
  }

  function doSave() {
    if(!validate()) return

    save(props.seedName, data.value.type, name.value, data.value)
    close?.()
  }
  
</script>